<template>
  <div class="page-container">
    <h2 class="page-title">联系我们</h2>
    <el-form :model="form" class="form" label-width="90px">
      <el-form-item label="姓名">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.email" />
      </el-form-item>
      <el-form-item label="主题">
        <el-input v-model="form.subject" />
      </el-form-item>
      <el-form-item label="内容">
        <el-input type="textarea" v-model="form.message" rows="6" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', email: '', subject: '', message: '' })
</script>
<style scoped>
.page-container { max-width: 800px; margin: 0 auto; padding: var(--spacing-xl); }
.page-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-lg); }
.form { background: var(--bg-white); padding: var(--spacing-lg); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
</style>